<template>
  <div class="app-container home">
    <div  v-if="isAdmin" class="wrapbox">
      <div class="top_box">
        <el-row :gutter="20">
          <el-col :span="5">
            <div>
              <el-statistic group-separator="," :value="todayData.userLogin" title="登录用户"></el-statistic>
            </div>
          </el-col>
          <el-col :span="5">
            <div>
              <el-statistic group-separator="," decimal-separator="." :value="todayData.userAdd" title="新增用户">
                <template slot="prefix">
                  <i class="el-icon-s-flag" style="color: red"></i>
                </template>
                <template slot="suffix">
                  <i class="el-icon-s-flag" style="color: blue"></i>
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="5">
            <div>
              <el-statistic group-separator="," :precision="2" :value="todayData.orderPrice" title="订单金额">
                <template slot="prefix">
                  <!-- <i class="el-icon-s-flag" style="color: red"></i> -->
                  <i style="color: red; font-size: 18px; font-weight: bold">￥</i>
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="5">
            <div>
              <el-statistic group-separator="," :precision="2" :value="todayData.aftersakesPrice" title="售后退款金额">
                <template slot="prefix">
                  <!-- <i class="el-icon-s-flag" style="color: red"></i> -->
                  <i style="color: red; font-size: 18px; font-weight: bold">￥</i>
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <el-statistic group-separator="," :value="todayData.character" title="性格测试"></el-statistic>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- <el-select v-model="typeValue" placeholder="请选择" @change="changeType">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <div style="border: 1px solid #ddd; border-radius: 10px; margin-top: 20px">
        <el-row class="homerow">
          <el-col :span="22" class="homecol2">
            <el-date-picker v-model="monthValue2" type="month" placeholder="选择月" value-format="yyyy-MM"
              @change="changeMonth_coupon">
            </el-date-picker>
            <div v-show="isshow" class="chartbox" ref="boxfour"></div>
            <el-empty v-show="!isshow" :image-size="200"></el-empty>
          </el-col>
        </el-row>
      </div>
      <div style="border: 1px solid #ddd; border-radius: 10px; margin-top: 20px">
        <div class="mytabs">
          <el-button type="primary" @click="changeType(1)">用户注册</el-button>
          <el-button type="success" @click="changeType(2)">订单</el-button>
          <el-button type="info" @click="changeType(3)">性格测试</el-button>
        </div>
        <el-row class="homerow">
          <el-col :span="11" class="homecol">
            <div class="chartbox" ref="boxone"></div>
            <!-- <div v-if="typeValue==2" class="chartbox" ref="boxtwo"></div> -->
          </el-col>
          <el-col :span="11" class="homecol">
            <el-date-picker v-model="yearValue" type="year" placeholder="选择年" format="yyyy" value-format="yyyy"
              @change="changeYear">
            </el-date-picker>
            <div class="chartbox" ref="boxtwo"></div>
          </el-col>
        </el-row>

        <el-row class="homerow">
          <el-col :span="11" class="homecol">
            <el-date-picker v-model="monthValue" type="month" placeholder="选择月" value-format="yyyy-MM"
              @change="changeMonth">
            </el-date-picker>
            <div class="chartbox" ref="boxthree"></div>
          </el-col>
          <el-col :span="11"> </el-col>
        </el-row>
      </div>
      <div style="border: 1px solid #ddd; border-radius: 10px; margin-top: 20px">
        <el-row class="homerow">
          <el-col :span="11" class="homecol">
            <div class="chartbox" ref="boxfive"></div>
          </el-col>
          <el-col :span="11" class="homecol">
            <div class="chartbox" ref="boxsix"></div>
          </el-col>
        </el-row>
        <el-row class="homerow">
          <el-col :span="22" class="homecol">
            <el-date-picker v-model="monthValue3" type="month" placeholder="选择月" value-format="yyyy-MM"
              @change="changeMonth_banner">
            </el-date-picker>
            <div v-show="isshowBanner" class="chartbox" ref="boxseven"></div>
            <el-empty v-show="!isshowBanner" :image-size="200"></el-empty>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-empty v-else description="暂无权限"></el-empty>
  </div>
</template>

<script>
import store from '@/store'
import * as echarts from "echarts";
import { getSevendays, getTerms, getToday, getCouponstsc, getLiulan, getChears, getBanners } from "../api/menu";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.7",
      todayData: {
        userLogin: 0,
        character: 0,
        orderPrice: 0.0,
        userAdd: 0,
        aftersakesPrice: 0.0,
      },
      isshow: true,
      isshowBanner: true,
      options: [
        {
          value: "1",
          label: "用户注册",
        },
        {
          value: "2",
          label: "订单",
        },
        {
          value: "3",
          label: "性格测试",
        },
      ],
      typeValue: "1",
      yearValue: new Date().getFullYear() + "",
      monthValue:
        new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "",
      monthValue2:
        new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "",
      monthValue3: new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "",
      option: {
        title: {
          text: "近七日统计",
        },
        tooltip: {},
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["人数"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            type: "bar",
            data: [],
          },
        ],
      },
      option2: {
        title: {
          text: "近七日统计",
        },
        tooltip: {},
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["总金额", "售后退款"],
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: {},
        series: [
          {
            name: "总金额",
            type: "bar",
            data: [],
          },
          {
            name: "售后退款",
            type: "bar",
            data: [],
          },
        ],
      },
      option3: {
        title: {
          text: "年统计",
        },
        tooltip: {},
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["注册人数"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "注册人数",
            type: "bar",
            data: [],
          },
        ],
      },
      option4: {
        title: {
          text: "年统计",
        },
        tooltip: {},
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["总金额", "售后退款"],
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: {},
        series: [
          {
            name: "总金额",
            type: "bar",
            data: [],
          },
          {
            name: "售后退款",
            type: "bar",
            data: [],
          },
        ],
      },
      option5: {
        title: {
          text: "月统计",
        },
        tooltip: {},
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["注册人数"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "注册人数",
            type: "bar",
            data: [],
          },
        ],
      },
      option6: {
        title: {
          text: "月统计",
        },
        tooltip: {},
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["总金额", "售后退款"],
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: {},
        series: [
          {
            name: "总金额",
            type: "bar",
            data: [],
          },
          {
            name: "售后退款",
            type: "bar",
            data: [],
          },
        ],
      },
      option7: {
        title: {
          text: "优惠券",
        },
        tooltip: {},
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["领取数量", "使用数量", "过期数量", "未使用"],
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: {},
        series: [
          {
            name: "领取数量",
            type: "bar",
            data: [],
          },
          {
            name: "使用数量",
            type: "bar",
            data: [],
          },
          {
            name: "过期数量",
            type: "bar",
            data: [],
          },
          {
            name: "未使用",
            type: "bar",
            data: [],
          },
        ],
      },
      option8: {
        title: {
          text: "页面浏览数据统计",
        },
        tooltip: {},
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["人次"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "人次",
            type: "bar",
            data: [],
          },
        ],
      },
      option9: {
        title: {
          text: "性格测试数据统计",
        },
        tooltip: {},
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["人次"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "人次",
            type: "bar",
            data: [],
          },
        ],
      },
      option10: {
        title: {
          text: "首页banner点击数据统计",
        },
        tooltip: {},
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["人次"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {
          minInterval:1
        },
        series: [
          {
            name: "人次",
            type: "bar",
            data: [],
            barWidth: '40', // 设置柱状图的宽度为类目宽度的50%
          },
        ],
      },
    };
  },
  computed: {
    isAdmin() {
      return store.getters.roles.some(item => item === 'admin')
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    //今日统计
    gettodayData() {
      getToday().then((res) => {
        this.todayData = res.data;
      });
    },
    //页面浏览数据统计
    getLiulanData() {
      getLiulan().then((res) => {
        this.option8.xAxis.data = res.data.titles;
        this.option8.series[0].data = res.data.warkes;
      })
    },
    //性格测试数据统计
    getChearsData() {
      getChears().then((res) => {
        this.option9.xAxis.data = res.data.titles;
        this.option9.series[0].data = res.data.warkes;
      })
    },
    //优惠券统计
    getCoupon(year, month) {
      getCouponstsc({ year, month }).then((res) => {
        console.log(res.data.titles.length);
        if (res.data.titles.length == 0) {
          this.isshow = false;
        } else {
          this.isshow = true;
        }
        this.option7.xAxis[0].data = res.data.titles;
        this.option7.series[0].data = res.data.receives;
        this.option7.series[1].data = res.data.useds;
        this.option7.series[2].data = res.data.expires;
        this.option7.series[3].data = res.data.notUseds;
        this.boxoneInit();
      });
    },
    // 首页banner数据统计
    getBannerData(year, month) {
      getBanners({ year, month }).then((res) => {
        if (res.code === 200) {
          if (res.data.length == 0) {
            this.isshowBanner = false;
          } else {
            this.isshowBanner = true;
          }
          this.option10.xAxis.data = res.data.map(item => item.synopsis);
          this.option10.series[0].data = res.data.map(item => item.receive);
          this.boxoneInit();
        } else {
          console.log(123456)
          this.isshowBanner = false;
        } 

      });
    },
    //获取七日数据
    getSevendaysAsync(type) {
      getSevendays(type).then((res) => {
        console.log(res.data, 234);
        if (this.typeValue == 1) {
          this.option.series[0].data = res.data.userAdd;
          this.option.xAxis.data = res.data.title;
          this.option.legend.data[0] = "注册人数";
          this.option.series[0].name = "注册人数";
        } else if (this.typeValue == 2) {
          this.option2.series[0].data = res.data.orderPrice;
          this.option2.series[1].data = res.data.aftersakesPrice;
          this.option2.xAxis[0].data = res.data.title;
        } else {
          this.option.series[0].data = res.data.character;
          this.option.xAxis.data = res.data.title;
          this.option.legend.data[0] = "性格测试";
          this.option.series[0].name = "性格测试";
        }
        this.boxoneInit();
      });
    },
    //获取年月数据
    getTermsAsync(type, year, month) {
      getTerms(type, { year, month }).then((res) => {
        if (this.typeValue == 1) {
          this.option3.series[0].data = res.data.userAdd;
          this.option3.xAxis.data = res.data.title;
          this.option3.legend.data[0] = "注册人数";
          this.option3.series[0].name = "注册人数";
        } else if (this.typeValue == 2) {
          this.option4.series[0].data = res.data.orderPrice;
          this.option4.series[1].data = res.data.aftersakesPrice;
          this.option4.xAxis[0].data = res.data.title;
        } else {
          this.option3.series[0].data = res.data.character;
          this.option3.xAxis.data = res.data.title;
          this.option3.legend.data[0] = "性格测试";
          this.option3.series[0].name = "性格测试";
        }
        this.boxoneInit();
      });
    },
    getTermsAsync2(type, year, month) {
      getTerms(type, { year, month }).then((res) => {
        if (this.typeValue == 1) {
          this.option5.series[0].data = res.data.userAdd;
          this.option5.xAxis.data = res.data.title;
          this.option5.legend.data[0] = "注册人数";
          this.option5.series[0].name = "注册人数";
        } else if (this.typeValue == 2) {
          this.option6.series[0].data = res.data.orderPrice;
          this.option6.series[1].data = res.data.aftersakesPrice;
          this.option6.xAxis[0].data = res.data.title;
        } else {
          this.option5.series[0].data = res.data.character;
          this.option5.xAxis.data = res.data.title;
          this.option5.legend.data[0] = "性格测试";
          this.option5.series[0].name = "性格测试";
        }
        this.boxoneInit();
      });
    },
    //切换类型
    changeType(item) {
      console.log(item, 123);
      this.typeValue = item;
      let month = new Date().getMonth() + 1;
      this.getSevendaysAsync(item);
      this.getTermsAsync(item, this.yearValue);
      this.getTermsAsync2(item, this.yearValue, month);
      this.monthValue =
        new Date().getFullYear() + "-" + (new Date().getMonth() + 1) + "";
    },
    changeYear(item) {
      console.log(item);
      this.getTermsAsync(this.typeValue, item);
    },
    changeMonth(item) {
      let datas = item.split("-");
      this.getTermsAsync2(this.typeValue, datas[0], datas[1]);
      console.log(item.split("-"));
    },
    //优惠券切换月份
    changeMonth_coupon(item) {
      console.log(item);
      let datas = item.split("-");
      this.getCoupon(datas[0], datas[1]);
    },
    changeMonth_banner(item) {
      let datas = item.split("-");
      this.getBannerData(datas[0], datas[1]);
    },
    //初始化图表
    boxoneInit() {
      let myChart = echarts.init(this.$refs.boxone);
      let myChart2 = echarts.init(this.$refs.boxtwo);
      let myChart3 = echarts.init(this.$refs.boxthree);
      let myChart4 = echarts.init(this.$refs.boxfour);
      let myChart5 = echarts.init(this.$refs.boxfive);
      let myChart6 = echarts.init(this.$refs.boxsix);
      let myChart7 = echarts.init(this.$refs.boxseven);
     
      if (this.typeValue == 2) {
        myChart.setOption(this.option2, { notMerge: "true" });
        myChart2.setOption(this.option4, { notMerge: "true" });
        myChart3.setOption(this.option6, { notMerge: "true" });
      } else {
        myChart.setOption(this.option, { notMerge: "true" });
        myChart2.setOption(this.option3, { notMerge: "true" });
        myChart3.setOption(this.option5, { notMerge: "true" });
      }
      myChart4.setOption(this.option7, { notMerge: "true" });
      myChart5.setOption(this.option8, { notMerge: "true" });
      myChart6.setOption(this.option9, { notMerge: "true" });
      myChart7.setOption(this.option10, { notMerge: "true" });

      window.addEventListener("resize", function () {
        myChart.resize();
        myChart2.resize();
        myChart3.resize();
        myChart4.resize();
        myChart5.resize();
        myChart6.resize();
        myChart7.resize();
      });
    },
  },
  mounted() {
    console.log(this.isAdmin, 'isAdmin')
    this.boxoneInit();
    this.getSevendaysAsync(this.typeValue);
    let year = new Date().getFullYear();
    let month = new Date().getMonth() + 1;
    this.getTermsAsync(this.typeValue, year);
    this.getTermsAsync2(this.typeValue, year, month);
    this.gettodayData();
    this.getCoupon(year, month);
    this.getLiulanData()
    this.getChearsData()
    this.getBannerData(year, month)
  },
};
</script>

<style scoped lang="scss">
.mytabs {
  margin-top: 20px;
  margin-left: 50px;
}

.wrapbox {}

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}

.top_box {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
}

.homecol2 {
  height: 400px;
  padding: 10px;
  text-align: right;
  margin-top: 20px;

  .chartbox {
    width: 100%;
    height: 100%;
  }
}

.homerow {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  padding-bottom: 10px;

  .homecol {
    height: 400px;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    margin-top: 20px;
    text-align: right;

    .chartbox {
      width: 100%;
      height: 100%;
    }
  }
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
